<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>个人中心</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script src="js/common.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font-awesome-4.3.0/css/font-awesome.css">
    <!-- <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/hammer.js/2.0.4/hammer.min.js"></script>
    <script>
    window.jQuery || document.write('<script src="js/jquery-2.1.4.min.js"><\/script>');
    window.hammer || document.write('<script src="js/hammer.min.js"><\/script>');
    </script> -->
</head>

<body>
    <header class="percen-header" id="percen_header" style="width: 100%;">
        <span class="bg blur"><img src=""></span>
        <h1 class="touxiang"><img src="img/person_touxiang.png" alt=""></h1>
        <h2 class="name">MR.内马尔</h2>
        <span class="span-icon"><i class="fa fa-angle-right"></i></span>
    </header>
    <div class="percen-news">
        <span class="news"><i class="newsIcon"></i>我的消息</span>
    </div>
    <div class="percen-line">
    </div>
    <nav class="nav" id="nav">
        <ul class="fix">
            <li class="active">
                <span class="title">喜欢的攻略</span>
            </li>
            <li>
                <span class="title">喜欢的商品</span>
            </li>
        </ul>
    </nav>
    <div class="tab-qiehuan percen-base">
        <ul>
            <li>
                <a href="/m/gonglue/detail/1" title="">
                    <div class="img"><img src="img/person_ad.png" alt=""></div>
                    <div class="xiaoxi">[足球]帅气球衣</div>
                </a>
            </li>
            <li>
                <a href="/m/gonglue/detail/1" title="">
                    <div class="img"><img src="img/person_ad.png" alt=""></div>
                    <div class="xiaoxi">[篮球]乔丹经典珍藏指南</div>
                </a>
            </li>
            <li>
                <a href="/m/gonglue/detail/1" title="">
                    <div class="img"><img src="img/person_ad.png" alt=""></div>
                    <div class="xiaoxi">[篮球]乔丹经典珍藏指南</div>
                </a>
            </li>
        </ul>
    </div>
    <div class="tab-qiehuan percen-base" style="display: none;">
        <ul>
            <li>
                <a href="/m/gonglue/detail/1" title="">
                    <div class="img"><img src="img/person_ad.png" alt=""></div>
                    <div class="xiaoxi">
                        <p class="live">我喜欢的礼物</p><p class="geshu">1个</p>
                    </div>
                    <div class="icon"><i class="fa fa-angle-right"></i></div>
                </a>
            </li>
            <li>
                <a href="/m/gonglue/detail/1" title="">
                    <div class="img"><img src="img/person_ad.png" alt=""></div>
                    <div class="xiaoxi">
                        <p class="live">我喜欢的礼物</p><p class="geshu">1个</p>
                    </div>
                    <div class="icon"><i class="fa fa-angle-right"></i></div>
                </a>
            </li>
            <li>
                <a href="/m/gonglue/detail/1" title="">
                    <div class="img"><img src="img/person_ad.png" alt=""></div>
                    <div class="xiaoxi">
                        <p class="live">我喜欢的礼物</p><p class="geshu">1个</p>
                    </div>
                    <div class="icon"><i class="fa fa-angle-right"></i></div>
                </a>
            </li>
            <li>
                <a href="/m/gonglue/detail/1" title="">
                    <div class="img"><img src="img/person_ad.png" alt=""></div>
                    <div class="xiaoxi">
                        <p class="live">我喜欢的礼物</p><p class="geshu">1个</p>
                    </div>
                    <div class="icon"><i class="fa fa-angle-right"></i></div>
                </a>
            </li>
        </ul>
    </div>
    <script>
    $(document).ready(function() {

        // tab 切换
        var oNav = document.getElementById('nav');
        TabQieHuan(oNav);

        var oPercen_header = document.getElementById('percen_header'),
            oWidth = oPercen_header.offsetWidth,
            oHeight = oWidth / 2.5;
        oPercen_header.style.height = oHeight + 'px';

        $('.percen-header .bg img').attr('src', $('.percen-header .touxiang img').attr('src'));
        $('.percen-header .bg').css('height', oHeight - 16 + 'px');
        $('.percen-header .bg img').css('height', oHeight - 16 + 'px');
    });
    </script>
</body>

</html>
